<template>
    <div class="company-box">
        <el-dialog
            :title="
                is_modify_dialog == 0
                    ? '仓库信息'
                    : is_modify_dialog == 1
                    ? '添加仓库'
                    : '修改仓库'
            "
            :visible.sync="is_dialog"
            :show-close="is_modify_dialog == 0 || !is_config ? true : false"
            width="445px"
            :top="is_modify_dialog == 0 ? '5vh' : '11vh'"
        >
            <div class="dialog-box" v-show="is_modify_dialog == 0">
                <div class="multi-brand">
                    <div class="multi-text">
                        <div class="title">
                            <span>仓库</span>
                        </div>
                        <div class="explain">
                            <span>开启后产品可以添加仓库</span>
                        </div>
                    </div>
                    <div class="multi-brand-but">
                        <el-switch
                            v-model="brand"
                            active-color="#3388ff"
                            inactive-color="#dcdfe6"
                            active-value="1"
                            inactive-value="2"
                            @change="setConfigureSwitch('brand', $event)"
                        >
                        </el-switch>
                    </div>
                </div>
                <div class="multi-brand" v-show="brand == 1">
                    <div class="multi-text">
                        <div class="title">
                            <span>多仓库</span>
                        </div>
                        <div class="explain">
                            <span>开启后1个产品可以选择多个仓库</span>
                        </div>
                    </div>
                    <div class="multi-brand-but">
                        <el-switch
                            v-model="brand_m"
                            active-color="#3388ff"
                            inactive-color="#dcdfe6"
                            active-value="1"
                            inactive-value="2"
                            @change="setConfigureSwitch('brand_m', $event)"
                        >
                        </el-switch>
                    </div>
                </div>
                <div class="dialog-form" v-show="brand == 1">
                    <el-form ref="form">
                        <div class="form-row">
                            <el-form-item class="form-item">
                                <el-input
                                    v-model="brand_name"
                                    placeholder="搜索一级规格"
                                    class="w-input"
                                ></el-input>
                            </el-form-item>
                            <el-form-item class="form-item">
                                <el-button type="primary" @click="brandSearch"
                                    >搜索</el-button
                                >
                            </el-form-item>
                            <el-form-item>
                                <el-button @click="brandReset">重置</el-button>
                            </el-form-item>
                        </div>
                    </el-form>
                </div>

                <div
                    class="list-box comm-list"
                    id="listbox"
                    v-if="brand == 1"
                    ref="list_dataList"
                    v-infinite-scroll="loadFun"
                    @mousewheel="scrollLoadMore()"
                >
                    <div
                        class="list-row"
                        v-for="item in list_data"
                        :key="item.id"
                    >
                        <div class="list-left">
                            <div class="img-box">
                                <el-image :src="item.imgs" fit="cover">
                                    <div slot="error" class="image-slot">
                                        <i class="el-icon-picture"></i>
                                    </div>
                                </el-image>
                            </div>
                            <div class="info-box">
                                <div class="title">
                                    <span>{{ item.title }}</span>
                                </div>
                                <div class="txt">
                                    <span>{{ item.txt }}</span>
                                </div>
                            </div>
                        </div>
                        <div class="list-right">
                            <el-button
                                type="primary"
                                icon="el-icon-edit"
                                circle
                                @click.stop="eidtbrandTitle(item, list_data)"
                            ></el-button>
                            <el-button
                                type="danger"
                                icon="el-icon-delete"
                                circle
                                @click.stop="delbrandFun(item, list_data)"
                            ></el-button>
                        </div>
                    </div>
                </div>
                <div class="add-brand-box">
                    <el-button @click="addbrandFun">添加仓库</el-button>
                </div>
            </div>
            <div class="dialog-box" v-show="is_modify_dialog != 0">
                <div class="dialog-form">
                    <el-form
                        ref="brandform"
                        :rules="rules"
                        :model="brandform"
                        label-width="70px"
                        :hide-required-asterisk="true"
                    >
                        <el-form-item label="仓库头像" class="form-img">
                            <addPhoto
                                ref="AddPhoto"
                                @uploadAavatar="uploadAavatar"
                            ></addPhoto>
                        </el-form-item>
                        <el-form-item label="仓库名称" prop="title">
                            <el-input
                                v-model="brandform.name"
                                placeholder="请输入仓库名称"
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="负责人" prop="uid_m">
                            <el-select
                                v-model="brandform.uid_m"
                                placeholder="请选择负责人"
                            >
                                <el-option
                                    v-for="item in options"
                                    :key="item.uid"
                                    :label="item.name"
                                    :value="item.uid"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="联系电话" prop="cellphone">
                            <el-input
                                v-model="brandform.cellphone"
                                placeholder="请输入联系电话"
                                maxlength="11"
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="地址">
                            <el-input
                                v-model="brandform.address"
                                placeholder="请输入地址"
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="备注">
                            <el-input
                                type="textarea"
                                v-model="brandform.txt"
                                placeholder="请输入备注"
                            ></el-input>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
            <span
                slot="footer"
                class="dialog-footer"
                v-if="is_modify_dialog != 0"
            >
                <el-button @click="cancelFun">取 消</el-button>
                <el-button type="primary" @click="submitFun" :loading="is_isbut"
                    >提 交</el-button
                >
            </span>
        </el-dialog>
        <imageCropper
            ref="imageCropper"
            :src="editUrl"
            @confirm="confirm"
            @cancel="cancel"
        >
        </imageCropper>
    </div>
</template>

<script>
import config from "@/js/conf/Config.js";
import addPhoto from "@/components/comm/AddPhoto.vue";
import imageCropper from "@/components/comm/ImageCropper.vue";
import staticConst from "@/js/const/StaticConst.js";

export default {
    name: "company",
    props: ["is_config"],
    components: {
        addPhoto,
        imageCropper,
    },
    data() {
        return {
            editUrl: "",
            avatarOrg: "",
            is_dialog: false,
            is_isbut: false,
            is_imgs: false,
            is_modify_dialog: "0",
            brand: "1",
            brand_m: "1",
            brand_name: "",
            is_load: false,
            scrolled: 0,
            pfrom: -20,
            list_data: [],
            options: [],
            brandform: {
                id: "",
                imgs: "",
                title: "",
                txt: "",
                uid_m: "",
                cellphone: "",
                address: "",
            },
            rules: {
                name: [
                    {
                        required: true,
                        message: "请输入仓库名称",
                        trigger: "blur",
                    },
                ],
                uid_m: [
                    {
                        required: true,
                        message: "请选择负责人",
                        trigger: "change",
                    },
                ],
                cellphone: {
                    pattern:
                        /\d{3}-\d{8}|\d{4}-\d{7}|^1(3[0-9]|4[57]|5[0-35-9]|7[0678]|8[0-9])\d{8}$/,
                    message: "请输入正确的手机号码",
                    trigger: "blur",
                },
            },
        };
    },
    created() {},
    methods: {
        initData(data = null) {
            this.brandform = {
                id: data.id || "",
                imgs: data.imgs || "",
                name: data.name || "",
                txt: data.txt || "",
                uid_m: data.uid_m || "",
                cellphone: data.cellphone || "",
                address: data.address || "",
            };
            this.setAddPhoto();
            this.createdUcpList();
        },
        /*****上传图片成功*****/
        uploadPicSuccess(index, name) {
            this.brandform.imgs = name;
            this.is_imgs = true;
        },
        /*******上传头像*******/
        uploadAavatar(data) {
            this.editUrl = data.url;
        },
        /*****确认编辑图片****/
        confirm(data) {
            this.$refs.AddPhoto.confirm(data, this.uploadPicSuccess);
        },
        /****取消上传****/
        cancel() {
            this.brandform.imgs = this.avatarOrg;
            this.setAddPhoto();
        },

        // 提交
        submitFun() {
            this.$refs.brandform.validate(async (valid) => {
                if (valid) {
                    let url = config.CK_STORE_SAVE;
                    let param = this.brandform;
                    param.status = "1";
                    this.is_isbut = true;
                    let res = await this.$api({ url: url, data: param });
                    if (res.status == 1) {
                        this.$msg({
                            title:
                                this.is_modify_dialog == 1
                                    ? "添加成功"
                                    : "编辑成功",
                        });
                        if (this.is_modify_dialog == 1) {
                            this.scrolled = 0;
                            this.pfrom = 0;
                            this.list_data = [];
                            const data = {
                                pfrom: 0,
                                pnum: 20,
                            };
                            this.getListFun(data);
                        } else {
                            if (this.is_config) {
                                this.list_data.map((v) => {
                                    if (v.id == param.id) {
                                        v.title = param.title;
                                        v.txt = param.txt;
                                        v.imgs = this.is_imgs
                                            ? `${config.OSS_HOST}${param.imgs}?x-oss-process=image/resize,m_fill,w_240`
                                            : v.imgs;
                                    }
                                });
                            } else {
                                this.$emit("updataFun");
                                this.is_dialog = false;
                            }
                        }
                        if (this.is_config) {
                            this.is_modify_dialog = "0";
                        }
                        this.is_isbut = false;
                    } else {
                        this.is_isbut = false;
                    }
                } else {
                }
            });
        },
        // 获取经手人列表
        async createdUcpList() {
            let url = config.UCP_LS;
            let param = {};
            param.md = "xs";
            param.ch = 0;
            let res = await this.$api({ url: url, data: param });
            if (res.status == 1 && res.data) {
                this.options = res.data;
            }
        },
        // 取消
        cancelFun() {
            if (this.is_config) {
                this.is_modify_dialog = "0";
            } else {
                this.is_dialog = false;
            }
            this.is_isbut = false;
        },
        // 新增
        addbrandFun() {
            this.is_modify_dialog = "1";
            this.brandform = {
                id: "0",
                imgs: "",
                title: "",
                txt: "",
            };
            this.setAddPhoto();
        },
        // 编辑
        eidtbrandTitle(item) {
            this.is_imgs = false;
            this.is_modify_dialog = "2";
            this.brandform = {
                id: item.id,
                imgs: item.imgs,
                title: item.title,
                txt: item.txt,
            };
            this.setAddPhoto();
        },
        // 初始图片选择器
        setAddPhoto() {
            this.$nextTick(() => {
                let data = {};
                data.type = staticConst.UPLOAD_AVATAR;
                data.list = [
                    {
                        url: this.brandform.imgs,
                        imgs: "",
                        imgs: "",
                        isDel: false,
                    },
                ];
                this.$refs.AddPhoto.initPhotoData(data);
            });
        },
        // 重置
        brandReset() {
            this.brand_name = "";
            this.is_load = false;
            this.list_data = [];
            if (this.scrolled > 0) {
                this.pfrom = -20;
                this.scrolled = -1;
            } else {
                const data = {
                    pfrom: 0,
                    pnum: 20,
                };
                this.getListFun(data);
            }
        },
        // 搜索
        brandSearch() {
            this.is_load = false;
            this.list_data = [];
            if (this.scrolled > 0) {
                this.pfrom = -20;
                this.scrolled = -1;
            } else {
                const data = {
                    kw: this.brand_name,
                    pfrom: 0,
                    pnum: 20,
                };
                this.getListFun(data);
            }
        },
        // 删除
        delbrandFun(item, data) {
            this.$confirm("确定删除该仓库吗?", "删除仓库", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(async () => {
                    let url = config.BRAND_DEL;
                    let param = {
                        id: item.id,
                    };
                    let res = await this.$api({ url: url, data: param });
                    if (res.status == 1) {
                        this.$msg({ title: "删除成功" });
                        data.map((v, i) => {
                            if (v.id == item.id) {
                                data.splice(i, 1);
                            }
                        });
                    }
                })
                .catch(() => {});
        },
        // 滚动加载
        loadFun() {
            if (this.is_load) return;
            this.pfrom += 20;
            const data = {
                kw: this.brand_name || "",
                pfrom: this.pfrom,
                pnum: 20,
            };
            this.getListFun(data);
        },
        // 列表数据
        async getListFun(val) {
            let url = config.BRAND_LS;
            let param = val;
            let res = await this.$api({ url: url, data: param });
            if (res.data.brand_ls) {
                this.list_data = this.list_data.concat(res.data.brand_ls);
                this.is_load = false;
                this.is_isbut = false;
            } else {
                this.is_load = true;
            }
        },
        // 监听滚动
        scrollLoadMore() {
            this.scrolled = this.$refs.list_dataList.scrollTop;
        },
        setConfigureSwitch(key, val) {
            const data = {
                key: key,
                is_updata: true,
            };
            this.$emit("setConfigureSwitch", data, val);
        },
    },
};
</script>

<style lang="scss" scoped>
.company-box {
    ::v-deep.el-dialog {
        margin: 0 auto;
    }
}
.dialog-box {
    ::v-deep.form-img {
        display: flex;
        align-items: center;
        .el-form-item__content {
            margin: 0 !important;
        }
    }
    .dialog-form {
        .form-row {
            display: flex;
            .form-item {
                margin-right: 10px;
                margin-bottom: 10px;
                .w-input {
                    width: 242px;
                }
            }
        }
        ::v-deep.el-textarea__inner {
            min-height: 150px !important;
            font-size: initial;
        }
        ::v-deep.el-select {
            width: 100%;
        }
    }
    .multi-brand {
        display: flex;
        align-items: center;
        justify-content: space-between;
        border: 1px #dcdfe6 solid;
        width: 380px;
        padding: 5px 10px;
        border-radius: 5px;
        margin-right: 10px;
        margin-bottom: 10px;
        .multi-text {
            font-size: 12px;
            .title {
                font-size: 14px;
            }
            .explain {
                color: #9d9d9d;
            }
        }
    }

    .list-box {
        height: 500px;
        overflow: auto;
        .list-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px #f7f7f7 solid;
            padding: 10px;
            cursor: pointer;
            &:hover {
                background: #f7f7f7;
            }
            .list-left {
                display: flex;
                align-items: center;
                ::v-deep.img-box {
                    width: 50px;
                    height: 50px;
                    border-radius: 5px;
                    overflow: hidden;
                    margin-right: 10px;
                    border: 1px #f7f7f7 solid;
                    .el-image {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }
                    .image-slot {
                        display: flex;
                        height: 100%;
                        justify-content: center;
                        align-items: center;
                        color: #e1e2e3;
                        background: #eeeff0;
                    }
                }
                .info-box {
                    max-width: 220px;

                    .title {
                        font-size: 14px;
                        display: block;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
                    .txt {
                        font-size: 12px;
                        color: #9b9b9b;
                    }
                }
            }
            ::v-deep.list-right {
                .el-button {
                    padding: 5px;
                    font-size: 12px;
                    vertical-align: bottom;
                    margin-left: 10px;
                }
            }
        }
    }
    ::v-deep.add-brand-box {
        margin-top: 10px;
        .el-button {
            width: 100%;
        }
    }
}
</style>